<div class="profile-editor container-fluid" (window:keydown)="onGlobalKeyDown($event)">
    <a class="close-button" (click)="onClose.emit()"><span class="pficon pficon-close"></span></a>
    <form id="profile-editor-form" class="entity-editor-form" #entityEditorForm="ngForm">
        <div class="row-fluid header">
            <div class="col-md-12">
                <h1 class="title">
                    <span *ngIf="profile.id === null">Create </span>
                    <span *ngIf="profile.id !== null">Edit </span>
                    <span>Validation Profile</span></h1>
            </div>
        </div>

        <!-- Validation Profile Name and Description -->
        <div class="row-fluid body-section profile-section">
            <div class="col-sm-12 col-md-8">
                <div class="form-group">
                    <label class="control-label required" for="name">Name</label>
                    <div>
                        <input name="name" type="text" id="name" class="form-control" required #nameInput="ngModel"
                               [(ngModel)]="profile.name" placeholder="Enter a validation profile name." (keydown)="onInputKeypress($event)">
                        <form-error-message [inputModel]="nameInput" type="required">Name is required.</form-error-message>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label" for="description">Description</label>
                    <div>
                        <textarea name="description" id="description" class="form-control" [(ngModel)]="profile.description"></textarea>
                    </div>
                </div>
            </div>
        </div>

        <!-- Divider between form and rules -->
        <div class="row-fluid required-fields-notification divider-section">
            <div class="col-md-12">
                <div class="action-header">
                    <div class="notice">
                        <div class="notice-of-required modal-notice-of-required">The fields marked with <span class="required-icon">*</span> are required.</div>
                    </div>
                    <div class="actions">
                        <button class="btn btn-primary" (click)="onSave.emit()" [disabled]="!entityEditorForm.valid">Save</button>
                        <button class="btn btn-default" (click)="onClose.emit()">Cancel</button>
                    </div>
                </div>
                <hr />
            </div>
        </div>

        <!-- Validation Profile Rules -->
        <div class="row-fluid body-section rules-section">
            <!-- Header and explanation -->
            <div class="col-sm-12">
                <div class="section-header"><span>Validation Rules</span></div>
                <p>
                    Validation rules provide a way to check the content of an API.  Use any of the rules,
                    provided here, to check that the API is correct.  If the content violates a rule, an issue
                    will be created to alert the user.
                </p>
            </div>
            <!-- Filters -->
            <div class="col-sm-12 filters">
                <drop-down [id]="'filter-type'" [value]="filterType" [options]="filterTypeOptions()"
                           (onValueChange)="filterType = $event; filterValue = null"></drop-down>

                <input name="name-filter" type="text" id="name-filter" class="form-control" [(ngModel)]="filterValue"
                       (keydown)="onNameFilterKeypress($event)" placeholder="Filter by name" *ngIf="filterType == 'name'">
                <drop-down [id]="'severity-filter'" [value]="filterValue" [options]="severityOptions()" [classes]="'dd-filter'"
                           (onValueChange)="filterValue = $event; addFilter()" noSelectionLabel="Filter by severity"
                           *ngIf="filterType == 'severity'"></drop-down>
                <drop-down [id]="'rule-type-filter'" [value]="filterValue" [options]="ruleTypeOptions()" [classes]="'dd-filter'"
                           (onValueChange)="filterValue = $event; addFilter()" noSelectionLabel="Filter by rule type"
                           *ngIf="filterType == 'ruleType'"></drop-down>
                <drop-down [id]="'entity-type-filter'" [value]="filterValue" [options]="entityTypeOptions()" [classes]="'dd-filter'"
                           (onValueChange)="filterValue = $event; addFilter()" noSelectionLabel="Filter by entity type"
                           *ngIf="filterType == 'entityType'"></drop-down>
                <drop-down [id]="'version-filter'" [value]="filterValue" [options]="versionOptions()" [classes]="'dd-filter'"
                           (onValueChange)="filterValue = $event; addFilter()" noSelectionLabel="Filter by version"
                           *ngIf="filterType == 'version'"></drop-down>
            </div>
            <!-- Filter Results -->
            <div class="col-sm-12 filter-results" *ngIf="hasActiveFilters()">
                <hr />
                <div class="filter-results-bar">
                    <div class="num-selected" *ngIf="!isNoneSelected()">{{ getNumSelectedRules() }} Selected</div>
                    <div class="results">{{ filteredRules.length }} Results</div>
                    <span class="active-filter-label">Active filters:</span>
                    <div class="active-filters">
                        <span class="label label-info" *ngFor="let filter of activeFilters">
                            <span>{{ getFilterLabel(filter) }}:</span>
                            <span>{{ getFilterValue(filter) }}</span>
                            <a (click)="clearFilter(filter)"><i class="pficon pficon-close"></i></a>
                        </span>
                    </div>
                    <div class="clear-all">
                        <a (click)="clearAllFilters()"><span>Clear all filters</span></a>
                    </div>
                </div>
            </div>
            <!-- Rules -->
            <div class="col-sm-12">
                <div class="validation-rules rule-list">
                    <div class="rule-list-header" *ngIf="filteredRules.length > 0">
                        <div class="header">
                            <div class="expand column"></div>
                            <div class="check column">
                                <button (click)="toggleAll()">
                                    <span class="fa"
                                          [class.fa-square-o]="isNoneSelected()"
                                          [class.fa-check-square-o]="isAllSelected()"
                                          [class.fa-minus-square-o]="isSomeSelected()"></span>
                                </button>
                            </div>
                            <div class="icon column">
                                <div class="dropdown" *ngIf="!isNoneSelected()">
                                    <button class="btn btn-link dropdown-toggle" type="button" (click)="$event.preventDefault()" data-toggle="dropdown">
                                        <span class="fa fa-minus-circle" style="margin-right: 2px;"></span>
                                        <span class="fa fa-angle-down"></span>
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li class="rule-severity-option">
                                            <a (click)="bulkEdit(ignore())">
                                                <span class="icon fa fa-ban"></span>
                                                <span class="name">None</span>
                                                <span class="description">no validation issue will result</span>
                                            </a>
                                        </li>
                                        <li class="rule-severity-option">
                                            <a (click)="bulkEdit(low())">
                                                <span class="icon fa fa-info-circle"></span>
                                                <span class="name">Low</span>
                                                <span class="description">info that may need your attention</span>
                                            </a>
                                        </li>
                                        <li class="rule-severity-option">
                                            <a (click)="bulkEdit(medium())">
                                                <span class="icon fa fa-exclamation-triangle"></span>
                                                <span class="name">Medium</span>
                                                <span class="description">a condition that might cause a problem</span>
                                            </a>
                                        </li>
                                        <li class="rule-severity-option">
                                            <a (click)="bulkEdit(high())">
                                                <span class="icon fa fa-times-circle"></span>
                                                <span class="name">High</span>
                                                <span class="description">a serious error that must be corrected</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="name column">Name</div>
                            <div class="rule-type column">Rule Type</div>
                            <div class="entity-type column">Entity Type</div>
                            <div class="versions column" [class.trimmed]="rulesDiv.scrollHeight != rulesDiv.clientHeight">Version(s)</div>
                        </div>
                    </div>
                    <div class="rules" #rulesDiv>
                        <!-- "NO Rules found" -->
                        <div class="no-rules" *ngIf="filteredRules.length == 0">
                            <div class="title">No results match the filter criteria</div>
                            <div class="explanation">Zero <strong>rules</strong> matched the provided filters.</div>
                            <div class="explanation">Check for conflicting filters and try again.</div>
                            <div class="actions">
                                <a (click)="clearAllFilters()"><span>Clear all filters</span></a>
                            </div>
                        </div>

                        <!-- The list of rules -->
                        <div *ngIf="filteredRules.length > 0">
                            <div class="rule" *ngFor="let rule of filteredRules">
                                <div class="header">
                                    <div class="expand column"><span class="fa fa-angle-right"></span></div>
                                    <div class="check column">
                                        <button (click)="toggleRuleSelection(rule)">
                                        <span class="fa"
                                              [class.fa-square-o]="!isSelected(rule)"
                                              [class.fa-check-square-o]="isSelected(rule)"></span>
                                        </button>
                                    </div>
                                    <div class="icon column" title="{{ rule.code }}"><span class="fa"
                                                                   [class.fa-ban]="isIgnore(rule)"
                                                                   [class.fa-info-circle]="isInfo(rule)"
                                                                   [class.fa-exclamation-triangle]="isWarning(rule)"
                                                                   [class.fa-times-circle]="isError(rule)"></span></div>
                                    <div class="name column text" title="{{ rule.name }}">{{ rule.name }}</div>
                                    <div class="rule-type column text" title="{{ rule.type }}">{{ rule.type }}</div>
                                    <div class="entity-type column text" title="{{ rule.entity }}">{{ rule.entity }}</div>
                                    <div class="versions column">
                                        <div title="OpenAPI 2.0" *ngIf="isOpenApi20(rule)" class="type-icon oai2-icon16">&nbsp;</div>
                                        <div title="OpenAPI 3.x" *ngIf="isOpenApi30(rule)" class="type-icon oai3-icon16">&nbsp;</div>
                                        <div title="GraphQL" *ngIf="isGraphQL(rule)" class="type-icon graphql-icon16">&nbsp;</div>
                                        <div title="AsyncAPI 2.x" *ngIf="isAsyncApi20(rule)" class="type-icon aai2-icon16">&nbsp;</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Divider after the rules -->
        <div class="row-fluid divider-section">
            <div class="col-md-12">
                <hr />
            </div>
        </div>

        <div class="row-fluid actions-section">
            <div class="col-md-12">
                <div class="actions">
                    <button class="btn btn-primary" (click)="onSave.emit()" [disabled]="!entityEditorForm.valid">Save</button>
                    <button class="btn btn-default" (click)="onClose.emit()">Cancel</button>
                </div>
            </div>
        </div>
    </form>
</div>
